<script setup>
import { defineEmits, defineProps } from 'vue'

defineProps({
  value: { type: String, default: '' },
})

const emit = defineEmits(['update:value', 'add'])

function onEnter() {
  emit('add')
}
</script>

<template>
  <header class="header">
    <h1 class="title">TodoList</h1>
    <div class="new">
      <input
        :value="value"
        @input="emit('update:value', $event.target.value)"
        @keyup.enter="onEnter"
        placeholder="请输入待办事项并按回车添加"
      />
      <button class="add" @click="emit('add')">添加</button>
    </div>
  </header>
</template>

<style scoped>
.header { margin-bottom: 8px; }
.title { margin: 0 0 12px; text-align: center; }
.new { display: flex; gap: 8px; }
.new input { flex: 1; height: 36px; padding: 0 12px; border: 1px solid #ddd; border-radius: 6px; }
.add { height: 36px; padding: 0 14px; background: #42b883; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
</style>


